 //default
 $df_font_size: 14px;
 html,
 body {
     height: 100%;
     font-size: 14px;
     font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, FZLanTingHeiS-L-G, "PingFang SC", "Microsoft YaHei";
 }
 
 a {
     color: #474747;
 }
 
 li {
     list-style: none;
 }
 
 //tools
 @function _rem($px) {
     @return $px/$df_font_size*1rem;
 }
 
 @function _intervals($size:1) {
     @return _rem($size * 10px)
 }
 
 %img_box {
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
     img {
         height: 100%;
     }
 }
 
 %img_box_w {
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
     img {
         width: 100%;
     }
 }
 
 %text_overflow {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 // 容器隐藏侧边滚动条，最大宽度 + 16px (滚动条宽度), 嵌套两层结构
 %scroll_hid {
     overflow-y: auto;
     overflow-x: hidden;
 }
 
 //color
 $default_bg: #f1f2f7;
 $secondary_color: #bebebe;
 $main_color: #0057ff;
 $primary_color: $main_color;
 $info_color: #2db7f5;
 $danger_color: #ed3f14;
 $warning_color: #ff9900;
 $success_color: #19be6b;
 $disabled_color: #c7c7c7;
 $font_secondary: #bbc0cf;
 $font_light_color: #fff;
 $block_bg_color: #fff;
 $block_bg_dark: #f7f7f7;
 $border_color: #e0e0e0;
 $border_color_light: #eeeeee;
 // box-shadow
 $default_shadow: 0 _rem(2px) _rem(2px) _rem(1px) #ebeffd;
 @function iconHoverShadow($color: rgb(146, 190, 255)) {
     @return 0 _rem(2px) _rem(4px) _rem(1px) $color;
 }
 
 // font-size
 $font_larg: _rem(18px);
 $font_big: _rem(16px);
 $font_md: _rem(14px);
 $font_small: _rem(12px);
 $font_mini: _rem(10px);
 //animation
 $transition_time_l: 1s;
 $transition_time: .5s;
 $transition_time_q: .2s;
 // icon
 $icon_size: _rem(16px);
 $icon_size_large: _rem(22px);
 // border
 $border_radius: _rem(4px);
 // position
 %position_center {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
 }
 
 %flex_center {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 // transition
 .gradual-enter {
     opacity: 0;
     position: absolute;
     top: 0;
     left: -100%;
     right: 0;
     margin: auto;
 }
 
 .gradual-enter-active {
     opacity: 1;
     position: absolute;
     top: 0;
     right: 0;
     margin: auto;
     transition: all .5s;
 }
 
 .gradual-enter-to {
     opacity: 1;
     position: absolute;
     top: 0;
     left: 0;
     margin: auto;
 }
 
 .gradual-leave {
     opacity: 1;
 }
 
 .gradual-leave-active {
     opacity: 0;
 }
 
 .gradual-leave-to {
     opacity: 0;
 }
 
 //   right to left
 .right-to-left-enter {
     transform: translateX(100%);
     opacity: 0;
 }
 
 .right-to-left-enter-active {
     transition: all $transition_time;
 }
 
 .right-to-left-enter-to {
     opacity: 1;
     transform: translateX(0);
 }
 
 .right-to-left-leave {}
 
 .right-to-left-leave-active {
     opacity: 0;
     transform: translateX(100%);
     transition: all $transition_time;
 }
 
 .right-to-left-leave-to {}
 
 //   right to left
 .gradient-enter {
     opacity: 0;
 }
 
 .gradient-enter-active {
     opacity: 1;
     transition: all $transition_time;
 }
 
 .gradient-enter-to {
     opacity: 1;
 }
 
 .gradient-leave {
     opacity: 1;
 }
 
 .gradient-leave-active {
     opacity: 0;
     transition: all $transition_time;
 }
 
 .gradient-leave-to {
     opacity: 0;
 }
 
 .gradient-position-enter {
     @extend %position_center;
     opacity: 0;
 }
 
 .gradient-position-enter-active {
     @extend %position_center;
     transition: all $transition_time;
 }
 
 .gradient-position-enter-to {
     @extend %position_center;
     opacity: 1;
 }
 
 .gradient-position-leave {
     @extend %position_center;
     opacity: 1;
 }
 
 .gradient-position-leave-active {
     @extend %position_center;
     transition: all $transition_time;
 }
 
 .gradient-position-leave-to {
     @extend %position_center;
     opacity: 0;
 }
 
 .gradient-position-enter {
     @extend %position_center;
     opacity: 0;
 }
 
 .gradient-position-enter-active {
     @extend %position_center;
     transition: all $transition_time;
 }
 
 .gradient-position-enter-to {
     @extend %position_center;
     opacity: 1;
 }
 
 .gradient-position-leave {
     @extend %position_center;
     opacity: 1;
 }
 
 .gradient-position-leave-active {
     @extend %position_center;
     transition: all $transition_time;
 }
 
 .gradient-position-leave-to {
     @extend %position_center;
     opacity: 0;
 }
 
 //  上下
 .up-down-enter {
     opacity: 0;
     transform: translateY(-100%);
 }
 
 .up-down-enter-active {
     transition: all $transition_time;
 }
 
 .up-down-enter-to {
     opacity: 1;
     transform: translateY(0);
 }
 
 .up-down-leave {
     opacity: 1;
     transform: translateY(0);
 }
 
 .up-down-leave-active {
     transition: all $transition_time;
 }
 
 .up-down-leave-to {
     opacity: 0;
     transform: translateY(100%);
 }
 
 .up-down-enter {
     opacity: 0;
     transform: translateY(-100%);
 }
 
 .up-down-enter-active {
     transition: all $transition_time;
 }
 
 .up-down-enter-to {
     opacity: 1;
     transform: translateY(0);
 }
 
 .up-down-leave {
     opacity: 1;
     transform: translateY(0);
 }
 
 .up-down-leave-active {
     transition: all $transition_time;
 }
 
 .up-down-leave-to {
     opacity: 0;
     transform: translateY(100%);
 }
 
 // 缩放
 .scale-enter {
     //  opacity: 0;
     transform: scale(0, 0);
 }
 
 .scale-enter-active {
     transition: all $transition_time;
 }
 
 .scale-enter-to {
     //  opacity: 1;
     transform: scale(1, 1);
 }
 
 .scale-leave {
     //  opacity: 1;
     transform: scale(1, 1);
 }
 
 .scale-leave-active {
     transition: all $transition_time_q;
 }
 
 .scale-leave-to {
     transform: scale(0, 0);
 }
 
 // 滚动条样式
 // chrome
 $scrollBarMinSize: _rem(10px);
 ::-webkit-scrollbar {
     width: $scrollBarMinSize;
     height: $scrollBarMinSize;
     border-radius: _rem(8px);
     background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
     border-radius: $scrollBarMinSize;
     border-radius: _rem(8px);
     background-color: #e6e6e6;
     transition: all 1;
 }
 
 ::-webkit-scrollbar-corner {
     opacity: .5;
     background: $default_bg;
 }
 
 // fileFox
 ::-moz-scrollbar {
     opacity: .5;
     width: $scrollBarMinSize;
     height: $scrollBarMinSize;
     background: #e6e6e6;
 }